<template>
  <div class="panel">
    <el-form
      ref="formRef"
      :model="detail.data"
      class="demo-form-inline"
      label-width="140px"
    >
      <el-row>
        <el-col :span="12">
          <el-form-item prop="couponName" label="优惠券名称">
            {{detail.data.couponName}}
          </el-form-item>
          <el-form-item prop="couponType" label="适用活动类型">
            {{detail.data.couponType}}
          </el-form-item>
          <el-form-item prop="couponUseType" label="优惠券类型">
            {{detail.data.couponUseType}}
          </el-form-item>
          <el-form-item prop="couponMoney" label="抵扣额">
            {{detail.data.couponMoney/100}} 元
          </el-form-item>
          <el-form-item prop="orderMinMoney" label="订单最小金额">
            {{detail.data.orderMinMoney/100}} 元
          </el-form-item>
          <el-form-item prop="couponCount" label="张数">
            共 {{detail.data.couponCount}} 张
          </el-form-item>
          <el-form-item prop="userGetRestrict" label="每人领取张数上限">
            {{detail.data.userGetRestrict}} 张
          </el-form-item>
          <el-form-item prop="userType" label="用户类型">
            {{detail.data.userType}}
          </el-form-item>
          <el-form-item prop="undcouponStatusertaker" label="上架状态">
            {{ detail.data.couponStatus }}
          </el-form-item>
          <el-form-item prop="showPage" label="领券中心显示">
            {{detail.data.showPage}}
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>

<script>
import { reactive } from "vue";
import { onBeforeRouteUpdate, useRouter } from "vue-router";
import { getCouponDetail } from "@/api/coupon.js";
import { getItemFromArray, isLongTime } from "@/utils/tool";

export default {
  name: "couponDetail",
  components: {},
  setup() {
    // 默认数据备份，以便重置或恢复
    const { $data: detail, $fn: detailFn } = detailModule();
    return {
      detail,
      detailFn,
    };
  },
};

function detailModule() {
  const router = useRouter();
  const params = router.currentRoute.value.params;

  const $data = reactive({
    mapUrl: "",
    showAddress: false,
    data: {},
    tagsList: [],
  });
  const $fn = {
    getDetails() {
      getCouponDetail(params.id).then((res) => {
        if (res.code === 0) {
          $data.data = res.data || {};
        }
      });
    },
  };
  $fn.getDetails();
  return {
    $data,
    $fn,
  };
}
</script>

<style scoped lang="scss">
.panel {
  background-color: rgb(255, 255, 255);
  padding: 12px;
  border-radius: 8px;
}
</style>
